<template>
	<view class="container" :style="{backgroundImage:'url('+backthumb+')'}">
		<button @tap="back" class="backBtn">
			<img src="https://mmbiz.qpic.cn/mmbiz_png/Qs5ZVics1SyBPlbEPsNYyb0C7qcNZD4AQibLh6ZdSSPmicGhCVNb7Cu7n4xjV5tKLr36J3dMU1o4ianSUlVVdic2neg/640?wx_fmt=png&amp;from=appmsg"
				alt="" class="icon icon3">
			返回
		</button>
		<div :class="[{'scene animated':true},{'slideOutLeft': scene !== 0}]">
			<img src="https://mmbiz.qpic.cn/mmbiz_png/Qs5ZVics1SyArDHNzpEckCibQP8LoxJL1XDMuq4DqndbxZSTuCQJn7gtlibukibX79l4brNCkKNvqiaFYJnumOGUtFA/640?wx_fmt=png&from=appmsg"
				class="lipao animated infinite flash" style="animation-duration: 6s;" />
			<img src="https://mmbiz.qpic.cn/mmbiz_png/Qs5ZVics1SyArDHNzpEckCibQP8LoxJL1XQNfdnrtvFUibDMH9OLRwKvUxdZ1VWXyibY7wXB9Gn8SkPsIEtv2HXW8A/640?wx_fmt=png&from=appmsg"
				class="train animated infinite jello" style="animation-duration: 6s;" />
			<!-- <h5 class="title animated infinite jello">

			</h5> -->
			<img src="https://mmbiz.qpic.cn/mmbiz_png/Qs5ZVics1SyArDHNzpEckCibQP8LoxJL1X15eVsMuCIicYRjoiaQZYkfcsdcptf2sTf5B3vtQx3ff9Z7La7b04iayRg/640?wx_fmt=png&from=appmsg"
				class="flower animated infinite" style="animation-duration: 6s;" />
		</div>
		<div class="scene" v-show="scene === 1">
			<div class="center">
				<img src="https://mmbiz.qpic.cn/mmbiz_png/Qs5ZVics1SyArDHNzpEckCibQP8LoxJL1Xz9VXTnUJTU372KicJZNGWCXgHnn8t5sN0q1ExJnHtUKLryeWOViaOckA/640?wx_fmt=png&from=appmsg"
					class="qiqiu animated infinite wobble" style="animation-duration: 6s;" />

				<div class="more" :class="[isplaying?'playing':'']" @click="stopmusic">
					<image :src="musicImg">
					</image>
				</div>
				<transition name="fade">
					<div :class="currentClass"
						style="animation-duration: 5s;backgroundImage:url('https://mmbiz.qpic.cn/mmbiz_png/Qs5ZVics1SyArDHNzpEckCibQP8LoxJL1XjiaqoZibsq9pEdXM62xztwZVJ4kUNNnx4DSObhABicbXO8MLWZcU0Cw3Q/640?wx_fmt=png&from=appmsg')">
						<img :src="currentImage" :key="currentImage" class="classesImg" mode="widthFix"
							@click="previewImage(currentImage)" />
					</div>
				</transition>
			</div>
			<div class="foreground" :style="{backgroundImage:'url('+foreground+')'}">
				<img src="https://mmbiz.qpic.cn/mmbiz_png/Qs5ZVics1SyArDHNzpEckCibQP8LoxJL1XbXFfJDjUegfZUXHj3NaibW4efvvcfnTNPUibWLEKCAGAc35LbIa9w9Sg/640?wx_fmt=png&from=appmsg"
					class="xiaoji animated infinite tada" style="animation-duration: 6s;" />
				<img src="https://mmbiz.qpic.cn/mmbiz_png/Qs5ZVics1SyArDHNzpEckCibQP8LoxJL1X9sDic6fQlv9vodm94SOsV93Jgqd5sTPibZgBbRTPqHvfng0SPgGzXqXw/640?wx_fmt=png&from=appmsg"
					class="girl animated infinite wobble" style="animation-duration: 4s;" />
			</div>
			<div class="footer">
				<!-- 	<img src="https://mmbiz.qpic.cn/mmbiz_png/Qs5ZVics1SyBPlbEPsNYyb0C7qcNZD4AQS7ShWVIX3F41qvKesOQ8oibPWh06gjErWG38foJoSR6M7fnLpNJ8V0A/640?wx_fmt=png&amp;from=appmsg"
            alt="赞赏" @tap="reward" class="reward"> -->

				<button @tap="make" class="make">
					<img src="https://mmbiz.qpic.cn/mmbiz_png/Qs5ZVics1SyBPlbEPsNYyb0C7qcNZD4AQVRGIFFViaT9ot6EmABYMPibLprDqibMkMQ4YS18XvsMzX1MdqgGcyREgg/640?wx_fmt=png&amp;from=appmsg"
						alt="" class="icon">
					制作同款相册~
				</button>
				<button open-type='share' class='sharebutton radius shadow-blur'>
					<div class="shareview">
						<img src="https://mmbiz.qpic.cn/mmbiz_png/Qs5ZVics1SyBPlbEPsNYyb0C7qcNZD4AQw37CtMk0VIxQeiaVB8p7W7P2GCU7ATNFvDcvSJyIDJGzul5aN7tW9Ew/640?wx_fmt=png&amp;from=appmsg"
							alt="" class="icon icon2">
						分享
					</div>
				</button>
			</div>
		</div>
	</view>
</template>
<script>
	import temp from './temp.json'

	export default {
		name: 'album',
		components: {},
		data() {
			return {
				detail: {},
				index: 0,
				scene: 0,
				backthumb: '',
				foreground: '',
				isplaying: true,
				images: [
					// 'https://mmbiz.qpic.cn/mmbiz_jpg/Qs5ZVics1SyBPlbEPsNYyb0C7qcNZD4AQnSqnzsQFudCvyDm4icrBm5Wn9z4AalRUWwdxL20tuskcNEeicqxgoOmg/640?wx_fmt=jpeg&from=appmsg',
					// 'https://mmbiz.qpic.cn/mmbiz_jpg/Qs5ZVics1SyBPlbEPsNYyb0C7qcNZD4AQWvN44aU8KRNRiaoiaXRPMrZiaKJUIkwiblASCrVfqsLpq8MkJkeQkX5cuw/640?wx_fmt=jpeg&from=appmsg',
				],
				currentIndex: 0,
				currentImage: '',
				currentClass: 'animated fadeInDown imgBgcontainer',
				pages: [],
				isplaying: true,
				from: 'list',
				musicsrc: '',
				innerAudioContext: [],
				ano: '',
				imgUrl: '',
				canvasshow: false,
				timeslotavatar: [],
				appheight: '',
				autoplay: false,
				interval: 0,
				duration: 600,
				cur: 0,
				nickname: '朋友',
				avatar: '',
				buttontext: '定制自己的个性祝福',
				musicImg: ""
			}
		},
		onReady() {
			uni.hideTabBar();
		},
		onLoad(options) {
			const that = this;
			this.getalbum(options);
			setTimeout(() => {
				that.scene = 1;
			}, 5000);
		},
		onUnload: function() {
			//离开页面是停止播放音乐
			this.innerAudioContext.stop();
		},
		methods: {
			getalbum(options) {
				const that = this;
				const data = {
					'templateid': options.templateid,
					'appid': this.$apis.appId,
					'showano': options.showano, //
					'ano': options.ano
				};
				this.$apis.getalbum(data).then(res => {
					that.images = res.ablums;
					that.detail = res;
					that.detail.templateid = options.templateid;
					that.detail.showano = options.showano;
					wx.hideLoading();
					that.swiper(options.templateid);
				})
			},
			swiper(templateid) {
				const that = this;
				let beginAnimate;
				let animateList = [];
				let peek = 500;
				let roll = 4000
				let music;
				// templateid = 2
				console.log('templateid', templateid);
				temp.list.map(row => {
					if (parseInt(row.id) === parseInt(templateid)) {
						that.backthumb = row.backthumb
						that.foreground = row.foreground
						peek = row.peek;
						roll = row.roll;
						music = row.music;
						animateList = row.animate;
						beginAnimate = animateList[0].act;
					}
				})
				if (music) {
					that.startmusic(music);
				}

				this.currentImage = this.images[this.currentIndex];
				setInterval(() => {
					this.currentClass = beginAnimate;
					setTimeout(() => {
						this.currentIndex = (this.currentIndex + 1) % this.images.length;
						this.currentImage = this.images[this.currentIndex];
						this.currentClass = animateList[this.currentIndex].act;
					}, peek);
				}, roll);
			},
			back() {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},
			make() {
				uni.navigateTo({
					url: '/pages/make/make?templateid=' + this.detail.templateid + '&showano=' + this.detail
						.showano +
						'&ano=' + this.detail.ano + '&title=' + this.detail.title +
						"&type=child"
				})
			},
			startmusic(music) {
				let that = this;
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = true;
				this.innerAudioContext.src = music;
				this.innerAudioContext.loop = true;
				this.innerAudioContext.onPlay(() => {
					console.log('开始播放');
				});
			},
			stopmusic() {
				if (this.isplaying) {
					this.innerAudioContext.pause();
					this.isplaying = false;
				} else {
					this.innerAudioContext.play();
					this.isplaying = true;
				}
			},
			previewImage(url) {
				console.log('url', url);
				// 使用uni的预览图片接口
				uni.previewImage({
					current: 0, // 当前显示图片索引
					urls: [url], // 需要预览的图片http链接列表
				});
			},
			reward() {
				// todo
			}
		},
		onShareAppMessage: function() {
			const share = this.detail
			let title = decodeURIComponent(this.detail.title);
			const sharepath = '/pages/album/dragon?templateid=' + share.templateid + '&showano=' + share.showano +
				'&ano=' + share.ano;
			console.log('sharepath', sharepath);
			return {
				title: '粽情端午',
				path: sharepath,
				imageUrl: share.ablums[0],
				success: function(res) {
					// 转发成功
				},
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/animate.min.css";
	@import "album.scss"
</style>